

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:qzb_flutter_chart/bar_chart_widget.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chart Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bar Chart Demo'),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: [
              SizedBox(
                height: 100,
                width: 220,
                child: BarChartWidget(
                  x: BarChartX(
                    List.generate(25, (index) => "${index.toString().padLeft(2, '0')}:00"),
                    ["00:00", "24:00"],
                  ),
                  y: BarChartY(["0", "200", "400", "600", "800", "1000"], yTotal: 1000),
                  data: [
                    // 混合显示示例：该点作为点状显示，其余为柱状
                    BarChartData("00:00",  [BarChartSegment(0, 200, useDotChart: true, pointIsCircle: true, pointColor: Colors.blueGrey), BarChartSegment(500, 900)]),
                    BarChartData("08:00",  [BarChartSegment(0, 700)]),
                    BarChartData("09:00",  [BarChartSegment(0, 450, useDotChart: true, pointIsCircle: true, pointColor: Colors.deepPurpleAccent)]),
                    BarChartData("10:00",  [BarChartSegment(0, 480)]),
                    BarChartData("11:00",  [BarChartSegment(0, 480)]),
                    BarChartData("12:00",  [BarChartSegment(0, 300)]),
                    BarChartData("13:00",  [BarChartSegment(0, 480)]),
                    BarChartData("14:00",  [BarChartSegment(0, 680)]),
                    BarChartData("15:00",  [BarChartSegment(0, 300)]),
                  ],
                  barColor: Colors.orange,
                  selectedBarColor: Colors.red,
                  selectedBarMarkLineColor: Colors.black,
                  onBarSelected: (x) {
                    print("onBarSelected: $x");
                  },
                  showYAxis: false,
                  showXAxis: false,
                  showYAxisLabels: false,
                  showSegmentLines: false,
                  showSelectedVerticalLine: false,
                  barBaseColors: List.generate(25, (index) => Colors.grey.withOpacity(0.15)),
                  barSpacingRatio: 3.0,
                  barRadius: const BorderRadius.all(
                      Radius.circular(10)
                  ),

                ),
              ),
              SizedBox(
                height: 300,
                child: BarChartWidget(
                  x: BarChartX(
                    List.generate(25, (index) => "${index.toString().padLeft(2, '0')}:00"),
                    ["00:00", "06:00", "12:00", "18:00", "24:00"],
                  ),
                  y: BarChartY(["0", "200", "400", "600", "800", "1000"], yTotal: 1000),
                  data: [
                    BarChartData("00:00",  [BarChartSegment(0, 200),BarChartSegment(500, 900)]),
                    BarChartData("08:00",  [BarChartSegment(0, 700)]),
                    BarChartData("09:00",  [BarChartSegment(0, 450)]),
                    BarChartData("10:00",  [BarChartSegment(0, 480)]),
                    BarChartData("11:00",  [BarChartSegment(0, 480)]),
                    BarChartData("12:00",  [BarChartSegment(0, 300)]),
                    BarChartData("13:00",  [BarChartSegment(0, 480)]),
                    BarChartData("14:00",  [BarChartSegment(0, 680)]),
                    BarChartData("15:00",  [BarChartSegment(0, 300)]),
                  ],
                  barColor: Colors.orange,
                  selectedBarColor: Colors.red,
                  selectedBarMarkLineColor: Colors.black,
                  barRadius: const BorderRadius.only(
                    topLeft: Radius.circular(10),
                    topRight: Radius.circular(10),
                  ),
                  barBaseColors: List.generate(25, (index) => Colors.purple.withOpacity(0.15)),
                  onBarSelected: (x) {
                    print("onBarSelected: $x");
                  },
                ),
              ),
              Container(
                height: 300,
                child: BarChartWidget(
                  x: BarChartX(
                    ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                    ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                  ),
                  y: BarChartY(["0", "200", "400", "600", "800", "1000"], yTotal: 1000),
                  data: [
                    BarChartData("周一", [
                      BarChartSegment(20, 100, barColor: Colors.green, selectedBarColor: Colors.greenAccent),
                      BarChartSegment(200, 700, barColor: Colors.yellow, selectedBarColor: Colors.yellowAccent)
                    ]),
                    BarChartData("周二", [BarChartSegment(0, 440)]),
                    BarChartData("周三", [BarChartSegment(0, 480)]),
                    BarChartData("周四", [BarChartSegment(0, 480)]),
                    BarChartData("周五", [BarChartSegment(0, 300)]),
                    BarChartData("周六", [BarChartSegment(0, 480)]),
                  ],
                  barColor: Colors.orange,
                  selectedBarColor: Colors.orangeAccent,
                  selectedBarMarkLineColor: Colors.black,
                  barBaseColors: List.generate(7, (index) => Colors.lightBlueAccent.withOpacity(0.18)),
                  yBackgroundBands: const [
                    YBackgroundBand(start: 300, end: 500, color: Color(0x332196F3)),
                  ],
                  selectedMarkTopBuilder: (context, selected) {
                    final total = selected.segments.fold<double>(0, (p, e) => p + e.end - e.start).toInt();
                    return Container(
                      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(6),
                        boxShadow: const [BoxShadow(color: Colors.black12, blurRadius: 4)],
                        border: Border.all(color: Colors.blueAccent, width: 0.8),
                      ),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text('总量 $total', style: const TextStyle(fontSize: 12, color: Colors.black87)),
                          Text(selected.x, style: const TextStyle(fontSize: 11, color: Colors.blueGrey)),
                        ],
                      ),
                    );
                  },
                  onBarSelected: (x) {
                    print("onBarSelected: $x");
                  },
                  enableGrowthAnimation: true,
                ),

              ),
              SizedBox(
                height: 300,
                child: BarChartWidget(
                  x: BarChartX(
                    List.generate(25, (index) => "${index.toString().padLeft(2, '0')}:00"),
                    ["00:00", "06:00", "12:00", "18:00", "24:00"],
                  ),
                  y: BarChartY(["0", "200", "400", "600", "800", "1000"], yTotal: 1000),
                  data: [
                    BarChartData("00:00",  [BarChartSegment(0, 200),BarChartSegment(500, 900)]),
                    BarChartData("08:00",  [BarChartSegment(0, 700)]),
                    BarChartData("09:00",  [BarChartSegment(0, 450)]),
                    BarChartData("10:00",  [BarChartSegment(0, 480)]),
                    BarChartData("11:00",  [BarChartSegment(0, 480)]),
                    BarChartData("12:00",  [BarChartSegment(0, 300)]),
                    BarChartData("13:00",  [BarChartSegment(0, 480)]),
                    BarChartData("14:00",  [BarChartSegment(0, 680)]),
                    BarChartData("15:00",  [BarChartSegment(0, 300)]),
                  ],
                  barColor: Colors.orange,
                  selectedBarColor: Colors.red,
                  selectedBarMarkLineColor: Colors.black,
                  barRadius: const BorderRadius.only(
                    topLeft: Radius.circular(10),
                    topRight: Radius.circular(10),
                  ),
                  onBarSelected: (x) {
                    print("onBarSelected: $x");
                  },
                  enableGrowthAnimation: true,
                  growthDuration: Duration(milliseconds: 3800),
                ),
              ),
              SizedBox(
                height: 300,
                child: BarChartWidget(
                  x: BarChartX(
                    List.generate(25, (index) => "${index.toString().padLeft(2, '0')}:00"),
                    ["00:00", "06:00", "12:00", "18:00", "24:00"],
                  ),
                  y: BarChartY(
                    ['35', '36', '37', '38', '39', '40', '41', '42'],
                    yTotal: 42,
                  ),
                  data: [
                    // Normal temperature in the morning
                    BarChartData("08:00", [BarChartSegment(36.4, 36.8,barColor: Colors.blue)]),
                    BarChartData("09:00", [BarChartSegment(36.0, 37.0)]),
                    BarChartData("10:00", [BarChartSegment(36.0, 37.2)]),

                    // Temperature starts rising
                    BarChartData("11:00", [BarChartSegment(36.0, 37.8)]),
                    BarChartData("12:00", [BarChartSegment(36.0, 38.5)]), // Fever

                    // This is a segmented bar to show that feature.
                    // It could represent a fluctuating temperature reading within the hour.
                    BarChartData("13:00", [BarChartSegment(38.0, 38.6), BarChartSegment(38.8, 39.2)]),

                    // High fever
                    BarChartData("14:00", [BarChartSegment(36.0, 39.5)]),
                    BarChartData("15:00", [BarChartSegment(36.0, 39.1)]),

                    // Temperature starts to drop
                    BarChartData("16:00", [BarChartSegment(36.0, 38.4)]),
                    BarChartData("17:00", [BarChartSegment(36.0, 37.9)]),
                    BarChartData("18:00", [BarChartSegment(36.0, 37.4)]),
                  ],
                  barColor: Colors.orange,
                  selectedBarColor: Colors.orange, //和barColor一致
                  selectedBarMarkLineColor: Colors.black,
                  barRadius: const BorderRadius.all(Radius.circular(10)),
                  onBarSelected: (x) {
                    print("onBarSelected: $x");
                  },
                ),
              ),
              SizedBox(
                height: 300,
                child: BarChartWidget(
                  x: BarChartX(
                    List.generate(25, (index) => "${index.toString().padLeft(2, '0')}:00"),
                    ["00:00", "06:00", "12:00", "18:00", "24:00"],
                  ),
                  y: BarChartY(["0", "200", "400", "600", "800", "1000"], yTotal: 1000),
                  data: [
                    BarChartData("00:00",  [BarChartSegment(0, 200),BarChartSegment(500, 900)]),
                    BarChartData("08:00",  [BarChartSegment(0, 700)]),
                    BarChartData("09:00",  [BarChartSegment(0, 450)]),
                    BarChartData("10:00",  [BarChartSegment(0, 480)]),
                    BarChartData("11:00",  [BarChartSegment(0, 480)]),
                    BarChartData("12:00",  [BarChartSegment(0, 300)]),
                    BarChartData("13:00",  [BarChartSegment(0, 480)]),
                    BarChartData("14:00",  [BarChartSegment(0, 680)]),
                    BarChartData("15:00",  [BarChartSegment(0, 300)]),
                  ],
                  barColor: Colors.orange,
                  selectedBarColor: Colors.orange,  //和barColor一致
                  selectedBarMarkLineColor: Colors.black,
                  barRadius: const BorderRadius.only(
                    topLeft: Radius.circular(10),
                    topRight: Radius.circular(10),
                    bottomLeft: Radius.circular(10),
                    bottomRight: Radius.circular(10),
                  ),
                  onBarSelected: (x) {
                    print("onBarSelected: $x");
                  },
                  yAxisOnRight: true,
                ),
              ),
              SizedBox(
                height: 300,
                child: BarChartWidget(
                  x: BarChartX(
                    List.generate(25, (index) => "${index.toString().padLeft(2, '0')}:00"),
                    ["00:00", "06:00", "12:00", "18:00", "24:00"],
                  ),
                  y: BarChartY(["0", "200", "400", "600", "800", "1000"], yTotal: 1000),
                  data: [
                    BarChartData("00:00",  [BarChartSegment(0, 200,pointColor: Colors.blueGrey,pointIsCircle: true),BarChartSegment(0, 900)]),
                    BarChartData("08:00",  [BarChartSegment(0, 700)]),
                    BarChartData("09:00",  [BarChartSegment(0, 450,pointIsCircle: true,pointColor: Colors.deepPurpleAccent)]),
                    BarChartData("10:00",  [BarChartSegment(0, 480)]),
                    BarChartData("11:00",  [BarChartSegment(0, 480)]),
                    BarChartData("12:00",  [BarChartSegment(0, 300)]),
                    BarChartData("13:00",  [BarChartSegment(0, 480)]),
                    BarChartData("14:00",  [BarChartSegment(0, 680)]),
                    BarChartData("15:00",  [BarChartSegment(0, 300)]),
                  ],
                  useDotChart: true,  //使用点状图
                  barColor: Colors.green,
                  selectedBarColor: Colors.green,  //和barColor一致
                  selectedBarMarkLineColor: Colors.black,
                  barRadius: const BorderRadius.only(
                    topLeft: Radius.circular(10),
                    topRight: Radius.circular(10),
                    bottomLeft: Radius.circular(10),
                    bottomRight: Radius.circular(10),
                  ),
                  onBarSelected: (x) {
                    print("onBarSelected: $x");
                  },
                  yBackgroundBands: const [
                    YBackgroundBand(start: 300, end: 500, color: Color(0x332196F3)),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}